<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .content .content_left{
            width: 200px;
            height: auto;

        }
        .content .content_left .content_shop_announcement{
            position: relative;
            top: 5px;
            width: 200px;
            height: 150px;
            border: 1px solid powderblue;
            background-color: powderblue;
            box-shadow: 0px 0px 3px powderblue;
        }
        .content .content_left .content_shop_announcement .content_shop_announcement_img{
            width: 100%;
            height: 30px;
            color: darkcyan;
            text-align: center;
            position: relative;
            padding-top: 5px;
            background-color: deepskyblue;
        }
        .content .content_left .content_shop_announcement .content_shop_announcement_text{
            width: 180px;
            height:95px;
            background-color:white;
            color: black;
            font-size:10px;
            padding: 10px;
            overflow: hidden ;

        }

        .content .content_left .content_shop_announcement .content_shop_announcement_div{
            width: 300px;
            height: 15px;
            position: relative;
            left: 180px;
            color: red;
        }
    </style>
</head>
<body>
<div class="content_left">
    <div class="content_shop_announcement">
        <div class="content_shop_announcement_img">商品公告</div>
        <div class="content_shop_announcement_text">
            欢迎光临手机网，我们的宗旨：诚信经营、服务客户！
            <br/>
            <br/>
            <div class="content_shop_announcement_div">
                咨询电话：010-11111111111 010-22222222222
            </div>

        </div>
    </div>
</div>
<script src="../lib/jquery/jquery.min.js"></script>
<script>
    /**
     * js特效--》文字滚动类
     * @param obj
     * @constructor
     */

    function Rolling(obj){
        var direction="left";           //文字滚动的方向
        this.obj=obj;
        var scrollingSpeed;           //文字每次滚动多少px
        var element;                    //需要滚动的元素

    }
    Rolling.prototype={
        constructor:Rolling,
        //初始化
        init:function(){
            if(this.obj["direction"]!="undefined"){
                this.direction=this.obj["direction"];
            }
            if(this.obj["scrollingSpeed"]!="undefined"){
                this.scrollingSpeed=this.obj["scrollingSpeed"];
            }
            if(this.obj["element"]!="undefined"){
                this.element=this.obj["element"];
            }
            this.scrollingSpeed=10;
        },
        //元素滚动
        moveDiv:function(){
            this.init();
            switch (this.direction){
                case "left":
                    this.leftMove();
                    break;
            }
        }
        //向左移动
        ,leftMove:function(){
            var left=parseInt(this.element.css("left"));
            left=left-this.scrollingSpeed;
            if(left<-230){
                this.element.css({"left":180+"px"});
            }else{
                this.element.css({"left":left+"px"});
            }

        },rightMove:function(){

        },topMove:function(){

        },bottomMove:function(){

        }


    }

//    调用代码

    var div=$(".content_shop_announcement_div");
    var rolling=new Rolling({"direction":"left","color":"red","element":div});
    var time=setInterval(function(){
        rolling.moveDiv();
    },300);
    div.mouseover(function(){
        clearInterval(time);

    }).mouseout(function(){
        time=setInterval(function(){
            rolling.moveDiv();
        },300);
    });
</script>
</body>
</html>